<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <link rel="stylesheet" href="/css/index.css">
</head>
<body>
    <div id="app">

        <!-- Form -->
        <el-button type="primary" round @click="dialogFormVisible = true">添加角色</el-button>
        <!--添加角色的对话框-->
        <el-dialog title="角色信息" :visible.sync="dialogFormVisible" @close="closeDialog">
            <el-form :model="role">
                <el-form-item label="角色名称" >
                    <el-input v-model="role.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" >
                    <el-input v-model="role.description" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveRole">确 定</el-button>
            </div>
        </el-dialog>
        <!-- Form -->
        <el-button type="primary" round @click="showTreeDialog">角色授权</el-button>
        <!--添加角色的对话框-->
        <el-dialog title="权限信息" :visible.sync="dialogTreeVisible">
            <el-tree
                    :data="functions"
                    show-checkbox
                    check-strictly
                    default-expand-all
                    node-key="id"
                    ref="tree"
                    @check="checkNode"
                    highlight-current
                    :props="defaultProps">
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTreeVisible = false">关  闭</el-button>
            </div>
        </el-dialog>
        <el-table
                :data="roles"
                ref="roleTable"
                @select-all="selectAll"
                @current-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="编号"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="名称"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="描述"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.description }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="size"
                @current-change="loadRoles">
        </el-pagination>


    </div>
    <script src="/js/vue.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    roles:[],
                    current:1,
                    size:0,
                    total:0,
                    dialogFormVisible:false, //是否显示对话框
                    dialogTreeVisible:false, //树对话框的显示
                    role:{id:'',name:'',description:''}, //添加的角色对象
                    functions:[], //权限数据
                    defaultProps: { //自定义树节点的名称
                        children: 'subFunctions',
                        label: 'name'
                    },
                    currentRole:null //当前选中的角色
                }
            },
            methods:{
                loadRoles(current){
                    this.current = current;
                    axios.get("http://localhost:8080/roles/page/"+this.current)
                        .then(value => {
                           //将分页数据返回给roles
                           this.roles = value.data.records;
                           this.size = value.data.size;
                           this.total = value.data.total;
                        });
                },
                //点击确定按钮保存角色
                saveRole(){
                    //判断如果id为空，执行添加，否则执行更新
                    if(this.role.id == ''){
                        //连接后台，把角色以json方式发送过去，获得返回的信息
                        axios.post("/role",this.role)
                            .then(value => {
                                this.$message(value.data);
                            });
                    }else{
                        axios.put("/role",this.role)
                            .then(value => {
                                this.$message(value.data);
                            })
                    }
                    //刷新数据
                    this.loadRoles(1);
                    //关闭对话框
                    this.dialogFormVisible = false;
                },
                //点击编辑
                handleEdit(index, row) {
                    console.log(index, row);
                    //打开对话框
                    this.dialogFormVisible = true;
                    //把当前行的角色的信息赋值给role，JSON序列化实现深复制
                    this.role = JSON.parse(JSON.stringify(row));
                },
                //点击删除
                handleDelete(index, row) {
                    console.log(index, row);
                    if(confirm("是否确定删除？")){
                        axios.delete("/role/" + row.id)
                            .then(value => {
                               if(value.data == "删除成功"){
                                   this.roles.splice(index,1);
                               }
                            });
                    }
                },
                //关闭对话框回调
                closeDialog(){
                    this.role = {id:'',name:'',description: ''};
                },
                //行的单选
                handleSelectionChange(current){
                    this.currentRole = current;
                    //清除所有选中效果
                    this.$refs.roleTable.clearSelection();
                    //选择当前行
                    this.$refs.roleTable.toggleRowSelection(current);
                },
                selectAll(){
                    this.$refs.roleTable.clearSelection();
                },
                //加载所有权限
                loadFunctions(){
                    axios.get("/functions")
                        .then(value => {
                           this.functions = value.data;
                        });
                },
                //打开角色授权对话框
                showTreeDialog(){
                    //判断是否有角色选中
                    if(this.currentRole){
                        //打开对话框
                        this.dialogTreeVisible = true;
                        //获得当前角色的权限
                        axios.get("/functions/role/" + this.currentRole.id)
                            .then(value => {
                               //选中当前角色的权限树节点
                                this.$refs.tree.setCheckedNodes(value.data);
                            });
                    }
                },
                //树的复选框勾选的方法 data是当前选中的权限数据  node当前节点
                checkNode(data,node){
                    //判断是勾选还是取消勾选(当前的权限在以勾选节点中存在）
                    if(node.checkedKeys.indexOf(data.id) != -1){
                        //后台给角色添加权限
                        axios.post("/role-fun",{roleId:this.currentRole.id,funId:data.id})
                            .then(value=>{
                                if(value.data == "ok"){
                                    this.$message("权限添加成功");
                                }
                            });
                    }else{
                        //取消权限
                        axios.delete("/role-fun/" + this.currentRole.id + "/" + data.id)
                            .then(value=>{
                                if(value.data == "ok"){
                                    this.$message("权限删除成功");
                                }
                            });
                    }
                }
            },
            mounted(){
                this.loadRoles(1);
                this.loadFunctions();
            }
        })
    </script>
</body>
</html>